<template>
  <div class="preson">
    <h1>当水温到达60度,或水位到达80cm时,给服务器发请求</h1>
    <h2>水温：{{ temp }}℃</h2>
    <h2>水位：{{ height }}㎝</h2>
    <button @click="changeTemp">水温+1</button>
    <button @click="changeHeight">水位+1</button>
  </div>
</template>

<script setup lang="ts" name="Preson">
  import { ref,reactive,watch,watchEffect} from "vue";
  // 数据
  let temp = ref(10),height = ref(0)
  // 方法
  function changeTemp(){
    temp.value += 10
  }
  function changeHeight(){
    height.value += 10
  }

  // 监听--watch
  watch([temp,height],(v1,v2)=>{
    let [newTemp,newHeight] = v1
    if(newTemp >= 60 || newHeight >= 80){
      console.log(v1,'向服务器发送请求')
    }
  })
  // 监视--watchEffect实现
  watchEffect((v)=>{
    if(temp.value >= 60 || height.value >= 80){
      console.log('向服务器发送请求')
    }
  })
</script>

<style scoped>
.preson {
  background-color: skyblue;
  box-shadow: 0 0 10px 0;
  padding: 10px;
  border-radius: 10px;
}
</style>
